<template>
  <div>
    <el-row type="flex">
      <el-button @click="onOut">导出</el-button>
      <el-upload :before-upload="onImport">
        <el-button>导入</el-button>
      </el-upload>
    </el-row>
  </div>
  <div v-if="isLoad">
    <div v-for="(lesson, index) in study.lessons" :key="index" class="lesson">
      <div class="l-name">{{ lesson.name }}</div>
      <div class="l-book" v-for="(book, bi) in lesson.books" :key="bi">
        <div class="l-info" style="margin-bottom:10px;">
          <el-row type="flex" align="middle" justify="space-between">
            <el-row type="flex" align="middle">
              <div style="margin-right:10px;">{{ book.name }}</div>
              <el-input v-model="book.page.value" style="width:100px;margin-right:10px;"></el-input>
              <!--{{ book.progress.percent }}-->
              <el-progress :percentage="book.progress.percent.value" type="circle" :width="50"></el-progress>
            </el-row>
            <el-button @click="onAdd(book)">添加进度</el-button>
          </el-row>
        </div>
        <div class="l-progress">
          <el-table :data="book.progress.records" :border="true">
            <el-table-column prop="time" label="日期" width="150">
              <template #default="{ row,column,$index }">
                {{ row.formatTime() }}
              </template>
            </el-table-column>
            <el-table-column prop="note" label="备注" />
            <el-table-column prop="progress" label="进度" width="80" />
            <el-table-column label="操作" fixed="right" width="180">
              <template #default="{ row,column,$index }">
                <el-button @click="onEdit(row)">修改</el-button>
                <el-button @click="book.progress.del(row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
  <RecordForm ref="c-RecordForm"></RecordForm>
</template>
<script>
import Study from './study/Study.js'
import RecordForm from './study/RecordForm.vue'
import moment from 'moment'
import saveAs from '@/libs/FileSaver.js'
import { ref, reactive, markRaw } from 'vue'
export default {
  components: {
    RecordForm
  },
  data() {
    return {
      a: 1,
      b: 2,
      isLoad: false
    }
  },
  methods: {
    add() {
      console.log(`helloworld`)
    },
    onAdd(book) {
      let c = this.$refs['c-RecordForm']
      c.add({
        book
      })
    },
    onEdit(row) {
      let c = this.$refs['c-RecordForm']
      c.edit(row)
    },
    onOut() {
      let json = this.study.toJSON()
      let content = JSON.stringify(json)
      var blob = new Blob([content], { type: 'text/plain;charset=utf-8' })
      let fileName = 'ouput_bk.json'
      saveAs(blob, fileName)
    },
    onImport(file) {
      let fr = new FileReader()
      fr.readAsText(file)
      fr.onload = (e) => {
        let json = JSON.parse(e.target.result)
        this.study.fromJSON(json)
        console.log(this.study.lessons[0].books[0].progress)
        this.$forceUpdate()
      }
      return false
    }
  },
  setup() {
    let study = new Study()
    return {
      study
    }
  },
  mounted() {
    this.isLoad = true
  }
}
</script>
<style type="text/css" lang="scss">
body {
  font-size: 14px;
}
.box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
}
.lesson {
  margin-bottom: 10px;
  .l {
    &-name {
      font-weight: bold;
    }
    &-book {
      margin-bottom: 10px;
    }
  }
}
</style>
